<template>
  <div>
    <el-form
      :model="entity"
      :rules="rules"
      ref="form"
      label-width="100px"
      class="dialog-form"
    >
      <el-row :span="24">
        <el-col :span="12">
          <el-form-item style="width: 160%" label="部门" prop="departmentId">
            <department-select
              :fnChange="search"
              v-model="entity.departmentId"
              :clearable="true"
            ></department-select>
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item style="width: 100%" label="工号" prop="workID">
            <el-input
              :disabled="disabled"
              placeholder="工号"
              v-model="entity.workID"
            >
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item style="width: 100%" label="姓名" prop="name">
            <el-input
              :disabled="disabled"
              placeholder="员工姓名"
              v-model="entity.name"
            >
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item style="width: 100%" label="状态" prop="workState">
            <el-select
              style="width: 100%"
              v-model="entity.workState"
              :disabled="disabled"
            >

              <el-option
                :key="'1'"
                :value="'1'"
                :label="'1--试用'"
              ></el-option>
              <el-option
                :key="'2'"
                :value="'2'"
                :label="'2--正式'"
              ></el-option>
              <el-option
                :key="'3'"
                :value="'3'"
                :label="'3--离职'"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item style="width: 100%" label="性别" prop="gender">
            <el-select
              style="width: 100%"
              v-model="entity.gender"
              :disabled="disabled"
            >
              <el-option :key="男" :value="'男'" :label="'男'"></el-option>
              <el-option :key="女" :value="'女'" :label="'女'"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item style="width: 100%" label="出生日期" prop="birthday"
            ><el-date-picker
              style="width: 100%"
              :disabled="disabled"
              v-model="entity.birthday"
              format="yyyy 年 MM 月 dd 日"
              value-format="yyyy-MM-dd HH:mm:ss"
              type="date"
              placeholder="选择日期"
            >
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item style="width: 100%" label="身份证号" prop="idCard">
            <el-input
              :disabled="disabled"
              placeholder="身份证号"
              v-model="entity.idCard"
            >
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item style="width: 100%" label="婚姻状况" prop="wedlock">
            <el-select
              style="width: 100%"
              v-model="entity.wedlock"
              :disabled="disabled"
            >
              <el-option
                :key="已婚"
                :value="'已婚'"
                :label="'已婚'"
              ></el-option>
              <el-option
                :key="未婚"
                :value="'未婚'"
                :label="'未婚'"
              ></el-option>
              <el-option
                :key="离异"
                :value="'离异'"
                :label="'离异'"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item style="width: 160%" label="民族" prop="nationId">
            <nation-select
              v-model="entity.nationId"
              :clearable="true"
            >
            </nation-select>
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item style="width: 100%" label="籍贯" prop="nativePlace">
            <el-input
              :disabled="disabled"
              placeholder="籍贯"
              v-model="entity.nativePlace"
            >
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item style="width: 100%" label="政治面貌" prop="politicId">
            <el-select
              style="width: 100%"
              v-model="entity.politicId"
              :disabled="disabled"
            >
              <el-option :key="1" :value="1" :label="'1--中共党员'"></el-option>
              <el-option
                :key="2"
                :value="2"
                :label="'2--中共预备党员'"
              ></el-option>
              <el-option :key="3" :value="3" :label="'3--共青团员'"></el-option>
              <el-option :key="4" :value="4" :label="'4--民革党员'"></el-option>
              <el-option :key="5" :value="5" :label="'5--民盟盟员'"></el-option>
              <el-option :key="6" :value="6" :label="'6--民建会员'"></el-option>
              <el-option :key="7" :value="7" :label="'7--民进会员'"></el-option>
              <el-option
                :key="8"
                :value="8"
                :label="'8--农工党党员'"
              ></el-option>
              <el-option
                :key="9"
                :value="9"
                :label="'9--致公党党员'"
              ></el-option>
              <el-option
                :key="10"
                :value="10"
                :label="'10--九三学社社员'"
              ></el-option>
              <el-option
                :key="11"
                :value="11"
                :label="'11--台盟盟员'"
              ></el-option>
              <el-option
                :key="12"
                :value="12"
                :label="'12--无党派民主人士'"
              ></el-option>
              <el-option
                :key="13"
                :value="13"
                :label="'13--普通公民'"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item style="width: 100%" label="邮箱" prop="email">
            <el-input
              :disabled="disabled"
              placeholder="邮箱"
              v-model="entity.email"
            >
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item style="width: 100%" label="电话号码" prop="phone">
            <el-input
              :disabled="disabled"
              placeholder="电话号码"
              v-model="entity.phone"
            >
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item style="width: 100%" label="联系地址" prop="address">
            <el-input
              :disabled="disabled"
              placeholder="联系地址"
              v-model="entity.address"
            >
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item style="width: 100%" label="职称" prop="jobLevelId">
            <joblevel-select
              v-model="entity.jobLevelId"
              :clearable="true"
            ></joblevel-select>
          </el-form-item>

        </el-col>

        <el-col :span="12">
          <el-form-item style="width: 100%" label="职位" prop="posId">
            <position-select
              v-model="entity.posId"
              :clearable="true"
            ></position-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item
            style="width: 100%"
            label="最高学历"
            prop="tiptopDegree"
          >
            <el-select
              style="width: 100%"
              v-model="entity.tiptopDegree"
              :disabled="disabled"
            >
              <el-option
                :key="本科"
                :value="'本科'"
                :label="'本科'"
              ></el-option>
              <el-option
                :key="大专"
                :value="'大专'"
                :label="'大专'"
              ></el-option>
              <el-option
                :key="硕士"
                :value="'硕士'"
                :label="'硕士'"
              ></el-option>
              <el-option
                :key="博士"
                :value="'博士'"
                :label="'博士'"
              ></el-option>
              <el-option
                :key="高中"
                :value="'高中'"
                :label="'高中'"
              ></el-option>
              <el-option
                :key="初中"
                :value="'初中'"
                :label="'初中'"
              ></el-option>
              <el-option
                :key="小学"
                :value="'小学'"
                :label="'小学'"
              ></el-option>
              <el-option
                :key="其他"
                :value="'其他'"
                :label="'其他'"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item style="width: 100%" label="所属专业" prop="specialty">
            <el-input
              :disabled="disabled"
              placeholder="所属专业"
              v-model="entity.specialty"
            >
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item style="width: 100%" label="毕业院校" prop="school">
            <el-input
              :disabled="disabled"
              placeholder="毕业院校"
              v-model="entity.school"
            >
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item style="width: 100%" label="入职日期" prop="beginDate"
            ><el-date-picker
              style="width: 100%"
              :disabled="disabled"
              v-model="entity.beginDate"
              format="yyyy 年 MM 月 dd 日"
              value-format="yyyy-MM-dd HH:mm:ss"
              type="date"
              placeholder="选择日期"
            >
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item
            style="width: 100%"
            label="转正日期"
            prop="conversionTime"
            ><el-date-picker
              style="width: 100%"
              :disabled="disabled"
              v-model="entity.conversionTime"
              format="yyyy 年 MM 月 dd 日"
              value-format="yyyy-MM-dd HH:mm:ss"
              type="date"
              placeholder="选择日期"
            >
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item style="width: 100%" label="离职日期" prop="notWorkDate"
            ><el-date-picker
              style="width: 100%"
              :disabled="entity.workState != 40"
              v-model="entity.notWorkDate"
              format="yyyy 年 MM 月 dd 日"
              value-format="yyyy-MM-dd HH:mm:ss"
              type="date"
              placeholder="选择日期"
            >
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item style="width: 100%" label="聘用形式" prop="engageForm">
            <el-select
              style="width: 100%"
              v-model="entity.engageForm"
              :disabled="disabled"
            >
              <el-option
                :key="'劳动合同'"
                :value="'劳动合同'"
                :label="'劳动合同'"
              ></el-option>
              <el-option
                :key="'劳务合同'"
                value="'劳务合同'"
                :label="'劳务合同'"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item
            style="width: 100%"
            label="合同期限"
            prop="contractTerm"
          >
            <el-input
              :disabled="disabled"
              placeholder="合同期限"
              v-model="entity.contractTerm"
            >
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item
            style="width: 100%"
            label="合同起始日期"
            prop="beginContract"
            ><el-date-picker
              style="width: 100%"
              :disabled="disabled"
              v-model="entity.beginContract"
              format="yyyy 年 MM 月 dd 日"
              value-format="yyyy-MM-dd HH:mm:ss"
              type="date"
              placeholder="选择日期"
            >
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item
            style="width: 100%"
            label="合同终止日期"
            prop="endContract"
            ><el-date-picker
              style="width: 100%"
              :disabled="disabled"
              v-model="entity.endContract"
              format="yyyy 年 MM 月 dd 日"
              value-format="yyyy-MM-dd HH:mm:ss"
              type="date"
              placeholder="选择日期"
            >
            </el-date-picker>
          </el-form-item>
        </el-col>
        <!-- 	<el-col :span='12'>
		<el-form-item style='width:100%' label='工龄' prop='workAge'>
			<el-input disabled placeholder='工龄' v-model='entity.workAge'>
			</el-input>
		</el-form-item>
		</el-col> -->
      </el-row>
    </el-form>
  </div>
</template>
<style lang="less" scoped>
.productLogo .el-upload-dragger {
  img {
    width: 200px;
    height: 100px !important;
  }
}

.clsCommon {
  margin-top: 10px;
  margin-left: -15px;
  margin-right: 15px;
}

.dialog-form {
  .el-radio-group {
    .el-radio {
      display: flex;
      align-items: center;
    }

    label {
      height: 40px;
    }
    .group-text {
      display: inline-block;
      width: 100px;
    }
    .title-text {
      display: inline-block;
      width: 120px;
    }
  }
}
</style>

<script>
// import ProductTypeSelect from '@/components/widgets/dongxw/ProductTypeSelect.vue';

const defaultEntity = {
  id: null, //  员工标识
  departmentId: null, //  部门
  code: null, //  工号
  name: null, //  员工姓名
  workId: " - ", //  工号原
  workState: "1--试用", //  在职状态
  gender: null, //  性别
  birthday: null, //  出生日期
  idCard: null, //  身份证号
  wedlock: null, //  婚姻状况
  nationId: null, //  民族
  nativePlace: null, //  籍贯
  politicId: null, //  政治面貌
  email: null, //  邮箱
  phone: null, //  电话号码
  address: null, //  联系地址
  jobLevelId: null, //  职称ID
  posId: null, //  职位ID
  tiptopDegree: null, //  最高学历
  specialty: null, //  所属专业
  school: null, //  毕业院校
  beginDate: null, //  入职日期
  conversionTime: null, //  转正日期
  notWorkDate: null, //  离职日期
  engageForm: null, //  聘用形式
  contractTerm: null, //  合同期限
  beginContract: null, //  合同起始日期
  endContract: null, //  合同终止日期
  workAge: null, //  工龄
};
import DepartmentSelect from "@/components/widgets/hr/DepartmentSelect.vue";
import NationSelect from "@/components/widgets/hr/NationSelect.vue";
import PoliticsSelect from "@/components/widgets/hr/PoliticsSelect.vue";
import PositionSelect from "@/components/widgets/hr/PositionSelect.vue";
import JoblevelSelect from "@/components/widgets/hr/JoblevelSelect.vue";

export default {
  components: {
    PoliticsSelect,
    PositionSelect,
    JoblevelSelect,
    NationSelect,
    DepartmentSelect,
  },
  data() {
    return {
      disabled: false,
      isShow: true,
      multiple: true,
      isExp: false,
      activeName: "productInfo",

      ruleTpl: { when: null, then: null },
      entity: _.cloneDeep(defaultEntity),
      dateRange: [],
      oldProps: [],
      ruleDefs: [],
      isDisabled: false,
      limitTotal: false,
      rules: {
        code: [
          {
            required: true,
          },
        ],
      },
    };
  },
  computed: {
    cbm: {
      get() {
        let v = this.entity.obSize.split("*");

        if (v.length === 3) {
          var multi = function (a, b) {
            return parseInt(a) * parseInt(b);
          };
          return (v.reduce(multi, 1) / 1000000).toFixed(4);
        }
        return 0;
      },
    },
  },
  methods: {
    clearImg() {
      this.entity.picUrl = null;
    },

    funHandleChange(imgRemarkArray) {},

    getProps(scope) {
      return this.entity.props.filter((p) => p.propScope == scope);
    },
    onRuleDefsLoaded(opts) {
      this.ruleDefs = opts || [];
      this.resetProps();
    },

    resetProps() {},
    setValues(vals) {
      this.resetEntity = _.cloneDeep(vals);
      this.entity = _.cloneDeep(this.resetEntity);
    },
    submitForm() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          let params = Object.assign({}, this.entity);

          this.$api.hr.EmployeeService.save(params).then((rsp) => {
            this.$msgJsonResult(rsp);
            this.$emit("saved", rsp);
          });
        }
      });
    },
    resetForm() {
      this.entity = _.cloneDeep(defaultEntity);
      if (!this.entity.configId) {
        this.entity.updatedAt = this.$dongxwDict.formatDateZero(new Date());
      }
    },
    init(options) {
      this.resetForm();
      if (options.id) {
        this.$api.hr.EmployeeService.findById(options.id).then((r) => {
          this.entity = r.data;
        });
      } else {
        this.isDisabled = false;
      }
    },
  },
  mounted() {
    this.$on("init", this.init);
    this.$on("submit", this.submitForm);
  },
};
</script>
